<template>
    <section class="group_transfer">
        <el-dialog width="55%" :visible.sync="isShow" :fullscreen="fullscreen" :show-close="false" top="40px" :append-to-body="true" :before-close="beforeClose" append-to-body>
            <el-row slot="title">
                <el-col :span="10" style="padding-top: 5px">
                    <span>添加小组</span>
                </el-col>
                <el-col :span="2" :offset="11">
                    <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
                    <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
                </el-col>
                <el-col :span="1">
                    <el-button type="text" icon="iconfont ali-guanbi" @click="parentCloseEvent" style="float: right"></el-button>
                </el-col>
            </el-row>
            <section>
                <el-row>
                    <el-col :span="11">
                        <div class="tree_transfer">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            <div style="margin: 15px 0;"></div>
                            <el-checkbox-group v-model="checkedValues" @change="handleCheckedValuesChange">
                                <ul>
                                    <li v-for="group in menuGroupList" :key="group.id" class="check-li">
                                        <el-checkbox :label="group">{{group.group_name}}</el-checkbox>
                                    </li>
                                </ul>
                            </el-checkbox-group>
                        </div>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <div class="tree_transfer _user">
                            <el-row v-for="user in userList" :key="user.id" style="background-color:#fff;padding: 5px 0 5px 15px">
                                <el-col :span="5" style="padding-top: 5px">
                                    <i class="iconfont ali-wenjianjia" style="font-size:20px;color:#B8E8FF"></i>
                                </el-col>
                                <el-col :span="16" style="padding-top:6px">
                                    <span>{{user.group_name}}</span>
                                </el-col>
                                <!-- <el-col :span="3">
                                    <el-button type="text" @click="remove(user)" icon="iconfont ali-close" style="margin-top:-3px"></el-button>
                                </el-col> -->
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </section>
            <section slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveObj">保 存</el-button>
                <el-button @click="parentCloseEvent">取 消</el-button>
            </section>
        </el-dialog>
    </section>
</template>
<script>
/* 测试树形穿梭框 */
import { mapGetters } from 'vuex'

export default {
    name: "group_transfer",
    props:{
        isShow: Boolean
    },
    data() {
        return {
            checkAll: false,
            isIndeterminate: false,
            checkedValues: [], //已经被选中的数据
            fullscreen: false,
            userList: []
        };
    },
    computed:{
        ...mapGetters([
            'menuGroupList'
        ])
    },
    methods: {
        clear(){//初始化
            this.checkedValues = []
            this.userList = []
            this.checkAll = false;
            this.isIndeterminate = false;
            this.fullscreen = false;
        },
        handleCheckAllChange(val) {//全选时
            this.checkedValues = val ? this.menuGroupList : [];
            this.userList = val ? this.menuGroupList : [];
            this.isIndeterminate = false;
        },
        handleCheckedValuesChange(value) {//单选时
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.menuGroupList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.menuGroupList.length;
            this.userList = value;
        },
        beforeClose(e){
            this.$emit('closeTransfer');
        },
        parentCloseEvent(){
            this.$emit('closeTransfer');
        },
        saveObj(){//提交保存
            this.$emit('getGroups',this.userList);
        },
    },
    async created(){
        if(this.menuGroupList.length == 0){
            await this.$store.dispatch('SetGroupList');
        }
    }
}
</script>
<style lang="scss" scoped>
.tree_transfer{
    background-color: #F3F4F5;
    padding: 10px;
    border-radius: 5px; 
    img{
        border-radius: 50%;
    }
}
._user{
    max-height: 450px;
    overflow: scroll;
}
.ali-wenjianjia1 {
    color: #b8e8ff;
}
.check-li{
    margin-top: 5px;
}
</style>
